import styles from './index.module.less';
import { Form, Button, Tabs, message } from 'antd';
import { FormPassword, FormEmail, FormVeriCode } from '../FormItem';
import { CodeOutlined, LockOutlined, MessageOutlined } from '@ant-design/icons';
import { Link } from 'ice';
import store from '@/store';
import security from '@/apis/security';

const useForm = Form.useForm;

interface ForgetPwdProps {}

export default function (props: ForgetPwdProps) {
  const [, dispatch] = store.useModel('security');
  const [form] = useForm();
  return (
    <div className={styles.forgetpwdContainer}>
      <Tabs defaultActiveKey="email" size="large">
        <Tabs.TabPane key="email" tabKey="email" tab="邮箱找回">
          <Form
            form={form}
            layout="vertical"
            onFinish={(values) => {
              dispatch.findPwd(values);
            }}
          >
            <FormEmail
              required
              name="email"
              fieldKey="email"
              requiredMessage="邮箱不能为空"
              wrapperProps={{
                placeholder: '请输入邮箱',
                singleBorder: true,
                allowClear: true,
                bordered: false,
                size: 'large',
                prefix: <MessageOutlined />,
              }}
            />
            <FormVeriCode
              required
              name="validateCode"
              fieldKey="validateCode"
              requiredMessage="验证码不能为空"
              wrapperProps={{
                placeholder: '请输入验证码',
                singleBorder: true,
                allowClear: true,
                bordered: false,
                size: 'large',
                async onGetVerCode() {
                  const email = form.getFieldValue('email');
                  if (!email) {
                    message.error('邮箱不能为空');
                    return false;
                  }
                  const result = await security.code({
                    email,
                  });
                  if (result) {
                    return true;
                  }
                  return false;
                },
                prefix: <CodeOutlined />,
              }}
            />
            <FormPassword
              required
              name="password"
              fieldKey="password"
              requiredMessage="密码不能为空"
              wrapperProps={{
                inputType: 'password',
                placeholder: '请输入密码',
                singleBorder: true,
                allowClear: true,
                bordered: false,
                size: 'large',
                prefix: <LockOutlined />,
              }}
            />
            <Button block htmlType="submit" type="primary" size="large">
              重置密码
            </Button>
          </Form>
        </Tabs.TabPane>
      </Tabs>
      <div className={styles.forgetpwdLink}>
        <Link to="/login">
          <span className={styles.linkItem}>用户登录</span>
        </Link>
        <Link to="/register">
          <span className={styles.linkItem}>用户注册</span>
        </Link>
      </div>
    </div>
  );
}
